<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<style>
    html,body,span,img,strong,ol,ul,li,p,h1,h2,h3,h4,h5,h6,img,em,area,table,br,hr,table,tr,td,dl,dt,b,dd,form,a,i,input,button{padding:0;margin:0;border:none;outline: none;}
    ul,li,ol{list-style:none;}
    a{text-decoration:none;color: #9aa5b2;}
    h1,h2,h3,h4,h5,h6,em{font-weight:normal;font-style: normal;color: #e6e6e6;}
    body{font-family: "微软雅黑 Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 12px;width: 100vw;background: #e5eaee;color: #666666;}
    .fullContent{width: 100vw;position: relative;}
    .fullContent::before{
        content: '';width: 100%;height: 220px;display: block;position: absolute;left: 0;top: 0;z-index: 0;background: #0658bb;
        background: -moz-linear-gradient(top, #0658bb 0%,#0158c1 50%, #0073bc 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0658bb), color-stop(50%,#0158c1),color-stop(100%,#0073bc));

        background: -o-linear-gradient(top, #0658bb 0%,#0158c1 50%,#0073bc 100%);
        background: -ms-linear-gradient(top, #0658bb 0%,#0158c1 50%,#0073bc 100%);
        background: linear-gradient(to bottom, #0658bb 0%,#0158c1 50%,#0073bc 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0658bb', endColorstr='#0073bc',GradientType=0 );
    }
    .fullContent .content{width: 1280px;overflow: hidden;margin: 0 auto;position: relative;z-index: 1;}
    .fullContent .content .header{width: 100%;height: 130px;box-sizing: border-box;}
    .fullContent .content .taskBox{width: 100%;height: 80vh;background: #ffffff;border-radius: 10px;padding-left: 101px;box-sizing:border-box;overflow: hidden;}


    .taskBox .right{width: 100%;height: 100%;background: #f6f6f6;float: left;}
    .taskBox .right .export{width: 100%;height: 40px;background: #ffffff;padding: 30px 50px;}
    .taskBox .right .export .btnExport{border: 1px dashed #eeeeee;cursor: pointer;height: 38px;display: inline-block;position: relative;}
    .taskBox .right .export .btnExport span{padding: 0 20px;line-height: 38px;cursor: pointer;}
    .taskBox .right .export .btnExport input[type=file]{width: 100%;position: absolute;z-index: 0;left: 0;top: 0;height: 38px;opacity: 0;cursor: pointer;}
    .taskBox .right .export .btnExport img{float: right;margin-top: 10px;padding-right: 10px;}

    .taskBox .right .listBox{width: 100%;box-sizing: border-box;overflow: hidden;}
    .taskBox .right .listBox .listTab{height: 60px;border-bottom: 1px solid #eeeeee;line-height: 60px;margin: 20px 50px;overflow: hidden;box-sizing: border-box;}
    .taskBox .right .listBox .listTab>*{float: left;}
    .taskBox .right .listBox .listTab input[type=checkBox]{margin-top: 24px;margin-right: 5px;}
    .taskBox .right .listBox .listTab span:nth-of-type(1){margin-right: 20px;}
    .taskBox .right .listBox .listTab span{margin-right: 40px;}
    .taskBox .right .listBox .list{padding: 0 50px;max-height: calc(80vh - 200px);overflow: auto;}
    .listBox .list .listTit{line-height: 40px;height: 40px;width: 100%;margin-bottom: 10px;display: inline-block;}
    .listBox .list ul{width: 100%;}
    .listBox .list ul li.dom{width: 100%;height: 100px;margin-bottom: 25px;background: #fafafa;}
    .listBox .list ul li.dom:hover{background: #f6fbff;box-shadow: 0 0 10px 2px #e0e0e0;}
    .taskBox::after{content: '';clear: both;display: block;height: 0;}

    /* 新添加css */
    .userMsg {
        width: 260px;
        height: 300px;
        position: relative;
        background-color: #e5eaee;
    }
    .userMsg_top {
        color: #fff;
        height: 150px;
        background-color: #0658bb;
    }
    .msg {
        display: flex;
        align-items: center;
        padding: 14px 20px 10px 30px;
    }
    .pic {
        margin-right: 20px;
    }
    .pic img{
        vertical-align: middle;
    }
    .unane {
        /* font-size: 18px; */
    }
    .member {
        width: 180px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 40px;
        margin: 0 auto;
        margin-top: -18px;
        background-color: rgba(10, 192, 92,1);
    }
    .memberDes {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .des {
        display: flex;
    }
    .person a {
        /* display: inline-block;
        width: 30px;
        height: 30px;
        background: url('./image/picVip.png') no-repeat center center;*/
    }
    .userMsg_botton div {
        width: 50%;
    }
    .userMsg_botton {
        display: flex;
        flex-wrap: wrap;
    }
</style>
<body>
<div class="fullContent">
    <div class="content">
        <div class="header">

        </div>
        <div class="taskBox">
            <div class="left">
                <h2><img src="feiliu.svg" alt=""></h2>
                <div class="userMsg">
                    <div class="userMsg_top">
                        <div class="msg">
                            <div class="pic">
                                <img src="./image/pic.png" alt="头像">
                            </div>
                            <div class="concat">
                                <div class="unane">
                                    <span>用户名</span>
                                    <img src="./image/vipPic.png" />
                                </div>
                                <div class="phone">
                                    <span>tel</span>
                                    <span>18819991836</span>
                                </div>
                            </div>
                        </div>
                        <div class="memberDes">
                            <div>您目前还不是下载会员－－</div>
                            <div class="des">
                                <div><span>90</span>元/季度</div>
                                <div>(连续包月,省钱又省事)</div>
                            </div>
                        </div>
                    </div>
                    <div class="member">开通会员</div>
                    <div class="userMsg_botton">
                        <div class="person"><a href="">个人中心</a></div>
                        <div class="order"><a href="">我的定单</a></div>
                        <div class="signOut"><a href="">退出</a></div>
                    </div>
                </div>
                <div>
                    <ul>
                        <li class="tab active"><label class="all_off"></label><span>全部</span></li>
                        <li class="tab"><label class="download_off"></label><span>正在下载</span></li>
                        <li class="tab"><label class="over_off"></label><span>下载完成</span></li>
                        <li class="tab"><label class="lose_off"></label><span>下载失败</span></li>
                    </ul>
                </div>
            </div>
            <div class="right">
                <div class="export">
                    <div class="btnExport"><span>导入文件</span><input type="file" class="selFile"><img src="" alt=""></div>
                </div>
                <div class="listBox">
                    <div class="listTab">
                        <span>任务列表：</span>
                        <input type="checkBox"><span>http</span>
                        <input type="checkBox"><span>https</span>
                        <input type="checkBox"><span>htp</span>
                        <input type="checkBox"><span>nagent</span>
                        <input type="checkBox"><span>bt</span>
                    </div>
                    <div class="list">
                        <span class="listTit">今天</span>
                        <ul>
                            <li class="dom">


                            </li>
                            <li class="dom"></li>
                            <li class="dom"></li>
                        </ul>
                        <span class="listTit">昨天</span>
                        <ul>
                            <li class="dom"></li>
                            <li class="dom"></li>
                            <li class="dom"></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>